<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-wallet"></i> 预存充值</h1>
        <el-form :model="rechargeData" ref="form" label-width="120px" class="recharge-form">
          <el-form-item label="充值金额" prop="amount" :rules="[{ required: true, message: '请输入充值金额', trigger: 'blur' }]">
            <el-input v-model="rechargeData.amount" placeholder="请输入金额" />
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod" :rules="[{ required: true, message: '请选择支付方式', trigger: 'change' }]">
            <el-select v-model="rechargeData.paymentMethod" placeholder="请选择支付方式">
              <el-option label="支付宝" value="alipay"></el-option>
              <el-option label="微信支付" value="wechat"></el-option>
              <el-option label="银行卡" value="bank"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRecharge">确认充值</el-button>
          </el-form-item>
        </el-form>
        <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
        <el-dialog :visible.sync="successDialogVisible" title="充值成功" width="30%">
          <p>充值金额: ¥{{ rechargeData.amount }}</p>
          <p>支付方式: {{ rechargeData.paymentMethod }}</p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="successDialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>

        <!-- 新模块：充值历史 -->
        <div class="card recharge-history">
          <h2><i class="el-icon-time"></i> 充值历史</h2>
          <el-table :data="rechargeHistory" style="width: 100%">
            <el-table-column prop="date" label="日期" width="150" />
            <el-table-column prop="amount" label="金额" width="100" />
            <el-table-column prop="method" label="支付方式" width="150" />
          </el-table>
        </div>

        <!-- 新模块：常见问题 -->
        <div class="card faq">
          <h2><i class="el-icon-question"></i> 常见问题</h2>
          <ul>
            <li v-for="(question, index) in faqs" :key="index">
              <i class="el-icon-info"></i> {{ question }}
            </li>
          </ul>
        </div>

        <!-- 新模块：用户反馈 -->
        <div class="card feedback">
          <h2><i class="el-icon-message"></i> 用户反馈</h2>
          <el-input type="textarea" v-model="userFeedback" placeholder="请留下您的反馈" />
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';

export default {
  name: 'PrepaidRecharge',
  components: {
    AsideLayout
  },
  data() {
    return {
      rechargeData: {
        amount: '',
        paymentMethod: ''
      },
      errorMessage: '',
      successDialogVisible: false,
      rechargeHistory: [
        { date: '2023-10-01', amount: '¥100', method: '支付宝' },
        { date: '2023-10-02', amount: '¥200', method: '微信支付' }
      ],
      faqs: [
        '如何查看充值记录？',
        '充值后多久到账？',
        '可以使用哪些支付方式？'
      ],
      userFeedback: ''
    };
  },
  methods: {
    submitRecharge() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.errorMessage = '请填写所有字段';
          return;
        }
        this.errorMessage = '';
        this.successDialogVisible = true;
        console.log('充值信息:', this.rechargeData);
        // 重置表单
        this.rechargeData.amount = '';
        this.rechargeData.paymentMethod = '';
      });
    },
    submitFeedback() {
      if (this.userFeedback) {
        this.$message.success('感谢您的反馈！');
        this.userFeedback = '';
      } else {
        this.$message.error('请填写反馈内容');
      }
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.recharge-form {
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.recharge-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

h1 i, h2 i {
  margin-right: 10px;
  color: #409EFF;
}

.error {
  color: red;
  margin-top: 10px;
}

.el-button {
  transition: background-color 0.3s, transform 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.el-input, .el-select {
  transition: border-color 0.3s;
}

.el-input:focus, .el-select:focus {
  border-color: #409EFF;
}
</style> 